<template>
  <view v-if="couponList.length" class="component-box" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="diy-coupon">
      <view
        v-if="propsData.params.showModuleName"
        class="coupon-header"
        @click="$utils.toUrl('/other/coupon_center/coupon_center')"
      >
        <view style="width: 100%">
          <moduleHeader
            :propsData="propsData"
            :moduleName="moduleName"
          ></moduleHeader>
        </view>
      </view>
      <view class="coupon-body">
        <!-- 一行 -->
        <nodeOne
          v-if="sortType == 1"
          :couponList="couponList"
          :propsData="propsData"
          @getCoupon="getCoupon"
        ></nodeOne>
        <!-- 2行 -->
        <nodeTwo
          v-if="sortType == 2"
          :couponList="couponList"
          :propsData="propsData"
          @getCoupon="getCoupon"
        ></nodeTwo>
        <!-- 3行 -->
        <nodeThree
          v-if="sortType == 3"
          :couponList="couponList"
          :propsData="propsData"
          @getCoupon="getCoupon"
        ></nodeThree>
        <!-- 滑动式 -->
        <nodeSlide
          v-if="sortType == 4"
          :couponList="couponList"
          :propsData="propsData"
          @getCoupon="getCoupon"
        ></nodeSlide>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import nodeOne from "./templates/nodeOne/index.vue";
import nodeTwo from "./templates/nodeTwo/index.vue";
import nodeThree from "./templates/nodeThree/index.vue";
import nodeSlide from "./templates/nodeSlide/index.vue";
import moduleHeader from "../components/moduleHeader/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    nodeOne,
    nodeTwo,
    nodeThree,
    nodeSlide,
    moduleHeader
  },
  mixins: [diyMixin], //混入文件
  data() {
    return {
      couponList: []
    };
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    sortType() {
      return this.propsData.params.sortType;
    },
    moduleName() {
      return this.propsData.params.moduleName;
    }
  },
  mounted() {
    this.getCouponList();
  },
  methods: {
    async getCouponList() {
      try {
        const res = await this.$allrequest.coupon.couponList();
        if (res.code == 0) {
          this.couponList = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {}
    },

    async getCoupon(e) {
      let coupon = e.item;
      if (coupon.is_receive != 0) {
        return;
      }
      try {
        const res = await this.$allrequest.coupon.receiveConpon(
          { id: coupon.id },
          true
        );
        if (res.code == 0) {
          this.$utils.toast(this.$t("coupon.success"));
          setTimeout(() => {
            this.getCouponList();
          }, 500);
        }
      } catch (e) {}
    }
  }
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .diy-coupon {
    width: 100%;
    .coupon-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 11.73vw;
      padding: 0 3.2vw;
      .coupon-title {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .more-coupon {
        display: flex;
        align-items: center;
        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
        }
        .iconfont {
          font-size: 16px;
          color: #888888;
        }
      }
    }
    .coupon-body {
      width: 100%;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
